import { useState } from "react"
import { libraries } from "@/data/libraries"
import { Button } from "@/components/ui/button"
import type { Library } from "@/types"

interface StartPageProps {
  onStartGame: (selectedLibraries: Library[]) => void
}

export default function StartPage({ onStartGame }: StartPageProps) {
  const [selectedLibraries, setSelectedLibraries] = useState<Library[]>([])

  const handleLibraryToggle = (library: Library) => {
    setSelectedLibraries((prev) =>
      prev.includes(library) ? prev.filter((lib) => lib.id !== library.id) : [...prev, library],
    )
  }

  const handleStartGame = () => {
    if (selectedLibraries.length > 0) {
      onStartGame(selectedLibraries)
    }
  }

  return (
    <div className="text-center">
      <h1 className="text-4xl font-bold mb-6 text-white">History Shuffle</h1>
      <p className="text-xl mb-8 text-white">Select one or more event libraries to start the game:</p>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
        {libraries.map((library) => (
          <div
            key={library.id}
            className={`
              cursor-pointer rounded-lg p-4 transition-all duration-300
              ${
                selectedLibraries.includes(library)
                  ? "bg-white bg-opacity-25 scale-105"
                  : "bg-white bg-opacity-15 hover:bg-opacity-20"
              }
            `}
            onClick={() => handleLibraryToggle(library)}
          >
            <h3 className="text-lg font-semibold text-white">{library.name}</h3>
            <p className="text-sm text-white opacity-80">{library.dateRange}</p>
          </div>
        ))}
      </div>
      <Button
        onClick={handleStartGame}
        disabled={selectedLibraries.length === 0}
        className="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded"
      >
        Start Game
      </Button>
    </div>
  )
}

